<template>
  <div class="box">
    <div
      class="add-btn"
      ref="btnRef"
      v-for="item in 10"
      :key="item"
      @click="createBall"
    ></div>
    <div class="shop-car" ref="shopRef">购物车</div>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "",
  setup() {
    const btnRef = ref(null);
    const shopRef = ref(null);
    /***
     * 动画轨迹控制
     * @param addBtn 增加按钮的dom元素或者选择器
     * @param shopCar 购物车的dom元素或选择器
     */
    function controllPath(addBtn, shopCar) {
      // 获取两个dom的位置
      const addBtnposition = addBtn.getBoundingClientRect();
      const shopCarPosition = shopCar.getBoundingClientRect();
      const addBtnCenterX = (addBtnposition.left + addBtnposition.right) / 2;
      const addBtnCenterY = (addBtnposition.top + addBtnposition.bottom) / 2;
      const shopCarCenterX = (shopCarPosition.left + shopCarPosition.right) / 2;
      const shopCarCenterY = (shopCarPosition.top + shopCarPosition.bottom) / 2;
      //计算增加按钮 是在 相对于购物车的 左边还是右边（用于控制后面的移动方向）
      const relativePositionX = addBtnCenterX > shopCarCenterX ? -1 : 1;
      const relativePositionY = addBtnCenterY > shopCarCenterY ? -1 : 1;

      // 获取连个dom之间的距离
      const xDistance = Math.abs(addBtnCenterX - shopCarCenterX);
      const yDistance = Math.abs(addBtnCenterY - shopCarCenterY);

      // 绘制小球并设置其位置
      const ballDom = drawBall();
      ballDom.style.top = addBtnCenterY + "px";
      ballDom.style.left = addBtnCenterX + "px";
      document.body.appendChild(ballDom);

      //小球的横竖坐标
      let xAbscissa = 0,
        yAbscissa = 0;

      //设置移动路径
      const ballTimer = setInterval(function () {
        //每次重新坐标
        xAbscissa += 5 * relativePositionX;
        yAbscissa =
          (yDistance / Math.pow(xDistance, 2)) *
          Math.pow(xAbscissa, 2) *
          relativePositionY;
        ballDom.style.top = addBtnCenterY + yAbscissa + "px";
        ballDom.style.left = addBtnCenterX + xAbscissa + "px";
        //检查是否到达终点
        const surplusDistance = parseInt(ballDom.style.left) - shopCarCenterX;
        if (Math.abs(surplusDistance) <= 10) {
          clearInterval(ballTimer);
          document.body.removeChild(ballDom);
        }
      }, 25);
    }

    /*
     * 绘制小球
     * */
    function drawBall() {
      const ballDom = document.createElement("div");
      ballDom.style.width = "20px";
      ballDom.style.height = "20px";
      ballDom.style.border = "1px solid #ccc";
      ballDom.style.background = "red";
      ballDom.style.borderRadius = "50%";
      ballDom.style.position = "absolute";
      return ballDom;
    }

    const createBall = (e) => {
      controllPath(e.target, shopRef.value);
    };
    // onMounted(() => {
    //   btnRef.value.addEventListener("click", function () {
    //     controllPath(btnRef.value, shopRef.value);
    //   });
    // });

    return {
      btnRef,
      shopRef,
      createBall,
    };
  },
});
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.box {
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid #cc726f;
  box-sizing: border-box;
}

.add-btn {
  width: 40px;
  height: 40px;
  border: 2px solid orange;
  border-radius: 50%;
  position: relative;
  /* top: 10px;
  left: 10px; */
  background: antiquewhite;
  box-sizing: border-box;
}

.add-btn:before,
.add-btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10%;
  margin-top: -2px;
  width: 80%;
  height: 4px;
  background: white;
}

.add-btn:after {
  transform: rotate(90deg);
}

.shop-car {
  width: 100px;
  height: 40px;
  border: 1px solid #ff574d;
  position: absolute;
  top: 300px;
  left: 100px;
  text-align: center;
  line-height: 40px;
}
</style>
